<template>
  <a-modal v-model:visible="dialogOpenStatus" :maskClosable="false" :width="720" :centered="true" :destroyOnClose="true" title="评分报告"
    class="score-result-dialog" @cancel="dialogClose">
    <div class="report-pdf-content">
      <vue-pdf-embed :source="pdfViewUrl" textLayer @loading-failed="loadingFailed" @rendering-failed="renderingFailed" />
    </div>
    <template #footer>
      <div class="dialog-footer-box">
        <div class="cancel-btn" @click="dialogClose">取消</div>
        <div class="ok-btn" @click="ok">下载报告</div>
      </div>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { defineEmits, ref, defineProps, watch } from 'vue';
import VuePdfEmbed from "vue-pdf-embed";
import 'vue-pdf-embed/dist/style/index.css';
import "vue-pdf-embed/dist/style/textLayer.css";


const props = withDefaults(defineProps<{
  openStatus: boolean;
  pdfUrl: string;
}>(), {
  openStatus: false,
  pdfUrl: ""
});

watch(() => props.openStatus, (newValue) => {
  dialogOpenStatus.value = newValue;
});

watch(() => props.pdfUrl, (newValue) => {
  pdfViewUrl.value.url = newValue ? newValue : "";
});

const emits = defineEmits<{
  (e: "update:openStatus", payload: boolean): void;
  (e: "ok"): void;
}>();

const dialogOpenStatus = ref<boolean>(props.openStatus);
// pdf预览地址
const pdfViewUrl = ref({
  url: props.pdfUrl,
  cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.11.174/cmaps/',
  cMapPacked: true,
});


function dialogClose() {
  emits("update:openStatus", false);
}

function loadingFailed(error: any) {
  console.log("加載出錯", error);
}

function renderingFailed(error: any) {
  console.log("渲染出錯", error);
};

/**
 * 验证表单
 */
async function ok() {
  try {
    // 通过验证将数据反馈给父组件
    emits("ok");
  } catch (error) {

  }
}
</script>

<style lang="less" scope>
.score-result-dialog {
  height: 85%;

  .ant-modal-content {
    height: 100%;
  }

  .ant-modal-header {
    height: 56px;
    padding: 0px 20px;
    display: flex;
    align-items: center;
  }

  .ant-modal-body {
    width: 100%;
    height: calc(100% - 56px - 62px);
    padding: 32px 20px !important;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;

    .report-pdf-content {
      height: 100%;

      .pdf-view-iframe {
        width: 100%;
        min-height: 100%;

        .toolbar {
          display: none;
        }
      }
    }
  }

  .ant-modal-footer {
    height: 62px;
    padding: 10px 20px 20px 20px;
    border-top: unset;
    box-sizing: border-box;

    .dialog-footer-box {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .ok-btn,
      .cancel-btn {
        font-size: 14px;
        padding: 0px 16px;
        border-radius: 4px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .cancel-btn {
        border: 1px solid #DCDFE6;
        color: #606266;

        &:hover {
          border-color: #C11A20;
          color: #C11A20;
        }
      }

      .ok-btn {
        background: #C11A20;
        color: #fff;
        margin-left: 12px;
      }
    }
  }

  .ant-modal-close {
    top: 20px;
    right: 20px;

    .ant-modal-close-x {
      width: 16px;
      height: 16px;
      line-height: 1;
    }
  }
}
</style>